<template>
  <el-row>
    <el-col :span="16">
      <el-row>
        <el-col :span="24">
          <div>
            <el-carousel :interval="1000" height="480px">
              <el-carousel-item>
                <img src="../../assets/imgs/lb2.jpg" alt="" style="width: 100%; height: 100%;">
              </el-carousel-item>
              <el-carousel-item>
                <img src="../../assets/imgs/lb3.jpg" alt="" style="width: 100%; height: 100%;">
              </el-carousel-item>
              <el-carousel-item>
                <img src="../../assets/imgs/lb4.jpg" alt="" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="24">
          <p style="font-weight: bold; font-size: 20px;">友情链接</p>
          <el-row :gutter="20">
            <el-col :span="8">
              <a href="https://www.gzasc.edu.cn" target="_blank"><img src="../../assets/imgs/lb2.jpg" alt="" style="width: 100%; height: 100%;"></a>
            </el-col>
            <el-col :span="8">
              <a href="https://www.gzasc.edu.cn/" target="_blank"><img src="../../assets/imgs/lb3.jpg" alt="" style="width: 100%; height: 100%;"></a>
            </el-col>
            <el-col :span="8">
              <a href="https://www.gec-edu.org/?20-zh&bd=yqc&bd vid=7825189101196810853" target="_blank"><img src="../../assets/imgs/lb4.jpg" alt="" style="width: 100%; height: 100%;"></a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="8" style="padding-left: 15px;">
      <div id="chart" style="width: 100%; height: 215px; background-color: #101f56;"></div>
      <div id="chart2" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
      <div id="chart4" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
      <div id="salesTrendChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
      <div id="userDistributionChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
      <div id="incomeChart" style="width: 100%; height: 215px; margin-top: 15px; background-color: #101f56;"></div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const chart = echarts.init(document.getElementById("chart"));
      const chart2 = echarts.init(document.getElementById("chart2"));
      const chart4 = echarts.init(document.getElementById("chart4"));
      const salesTrendChart = echarts.init(document.getElementById("salesTrendChart"));
      const userDistributionChart = echarts.init(document.getElementById("userDistributionChart"));
      const incomeChart = echarts.init(document.getElementById("incomeChart"));

      // 主图：销量柱状图
      const option = {
        textStyle: {
          color: '#ffffff',
        },
        color: ['rgb(250,200,88)', 'rgb(250,200,88)'],
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        title: {
          text: "销量数据",
          left: "center",
          textStyle: {
            color: '#66DD66',
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "产品：" + params[0].name +
              "<br/>销量：" + params[0].data
            );
          },
        },
        legend: {
          data: ["销量"],
          left: "right",
          textStyle: {
            color: '#ffffff',
          }
        },
        xAxis: {
          type: "category",
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子"],
        },
        yAxis: {
          type: "value",
          name: "销量",
          min: 0,
        },
        series: [{
          name: "销量",
          type: "bar",
          data: [5, 2, 3, 4],
          barWidth: "30",
        }],
      };

      // 饼图2：营业收入季度分布图
      const option2 = {
        title: {
          left: "center",
          text: "营业总收入季度分布图",
          textStyle: {
            color: "#6d6",
          },
        },
        tooltip: {},
        legend: {
          textStyle: {
            color: '#ffffff',
          },
          left: "right",
          top: "10",
          orient: "vertical",
          data: ["一季度", "二季度", "三季度", "四季度"],
        },
        dataset: {
          source: [
            ["quarter", "一季度", "二季度", "三季度", "四季度"],
            ["完美世界", 25.74, 25.7, 29.18, 21.58],
            ["中国神华", 510.8, 539.2, 611, 672],
          ],
        },
        series: [
          {
            name: "完美世界",
            type: "pie",
            center: ["25%", "50%"],
            radius: "40%",
            seriesLayoutBy: "row",
            encode: {
              itemName: 0,
              value: 1,
            },
            label: {
              show: false,
            },
          },
          {
            name: "中国神华",
            type: "pie",
            center: ["75%", "50%"],
            radius: "40%",
            seriesLayoutBy: "row",
            encode: {
              itemName: 0,
              value: 2,
            },
            label: {
              show: false,
            },
          },
        ],
      };

      // 折线图：用户激活数据
      const option4 = {
        textStyle: {
          color: '#ffffff',
        },
        title: {
          text: "用户激活数据",
          subtext: "Demo 虚构数据",
          x: "center",
          textStyle: {
            color: '#66DD66'
          }
        },
        legend: {
          orient: "horizontal",
          x: "left",
          y: "top",
          data: ["猜想", "预期", "实际"],
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "10%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: [
            "1月", "2月", "3月", "4月", "5月", 
            "6月", "7月", "8月", "9月", "10月", 
            "11月", "12月",
          ],
        },
        yAxis: {
          name: "人次",
          type: "value",
          min: 0,
          max: 4000,
          splitNumber: 7,
        },
        series: [
          {
            name: "猜想",
            data: [
              454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581,
            ],
            type: "line",
          },
          {
            name: "预期",
            data: [
              2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 
              2283, 2298,
            ],
            type: "line",
          },
          {
            name: "实际",
            data: [
              1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 
              3170, 3665,
            ],
            type: "line",
          },
        ],
        color: ["#3366CC", "#FFCC99", "#99CC33"],
      };

      // 新增：销售趋势折线图
      const salesTrendOption = {
        textStyle: {
          color: '#ffffff',
        },
        title: {
          text: "产品销售趋势",
          x: "center",
          textStyle: {
            color: '#66DD66'
          }
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["产品A", "产品B", "产品C"],
          textStyle: {
            color: '#ffffff',
          },
          left: "right",
        },
        xAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月", "六月"],
        },
        yAxis: {
          type: "value",
          name: "销量",
        },
        series: [
          {
            name: "产品A",
            type: "line",
            data: [120, 200, 150, 80, 70, 110],
            smooth: true,
          },
          {
            name: "产品B",
            type: "line",
            data: [90, 100, 80, 90, 70, 120],
            smooth: true,
          },
          {
            name: "产品C",
            type: "line",
            data: [60, 80, 100, 70, 90, 80],
            smooth: true,
          }
        ],
      };

      // 新增：用户分布饼图
      const userDistributionOption = {
        title: {
          text: "用户地区分布",
          subtext: "Demo 虚构数据",
          x: "center",
          textStyle: {
            color: '#66DD66'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#ffffff',
          },
        },
        series: [
          {
            name: '地区',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: '地区A' },
              { value: 310, name: '地区B' },
              { value: 234, name: '地区C' },
              { value: 135, name: '地区D' },
              { value: 1548, name: '地区E' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"],
          }
        ],
      };

      // 新增：收入柱状图
      const incomeOption = {
        title: {
          text: "产品收入对比",
          left: "center",
          textStyle: {
            color: '#66DD66',
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['产品X', '产品Y', '产品Z'],
          textStyle: {
            color: '#ffffff',
          },
          left: 'right',
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {
          type: 'value',
          name: '收入(万元)',
        },
        series: [
          {
            name: '产品X',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230],
            barWidth: '20%',
          },
          {
            name: '产品Y',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330],
            barWidth: '20%',
          },
          {
            name: '产品Z',
            type: 'bar',
            data: [150, 232, 201, 154, 190, 330],
            barWidth: '20%',
          }
        ],
      };

      // 设置各个图
            // 设置各个图表的选项并渲染  
      chart.setOption(option);  
      chart2.setOption(option2);  
      chart4.setOption(option4);  
      salesTrendChart.setOption(salesTrendOption);  
      userDistributionChart.setOption(userDistributionOption);  
      incomeChart.setOption(incomeOption);  
    },  
  }  
};  
</script>  

<style scoped>  
/* 可以在这里添加样式 */  
</style>